{layout name="layout/default" /}

<div class="container">
    <div class="row">
        <div class="col-12">
            <div class="ml-auto">
                <select class="form-control" id="category-select" onchange="changeCategory(this.value)">
                    <option value="">所有分类</option>
                    {foreach $categoryList as $category}
                    <option value="{$category.id}" {$category_id==$category.id?'selected':''}>
                        {$category.name}
                    </option>
                    {/foreach}
                </select>
            </div>
        </div>
    </div>

    <div class="row">
        {foreach $list as $item}
        <div class="col-md-4 mb-4">
            <div class="card h-100">
                {if $item.cover}
                <img src="{$item.cover}" class="card-img-top" alt="{$item.title}">
                {/if}
                <div class="card-body">
                    <h5 class="card-title">{$item.title}</h5>
                    <p class="card-text text-muted">{$item.description|default=''}</p>
                </div>
                <div class="card-footer bg-white">
                    <div class="d-flex justify-content-between align-items-center">
                        <small class="text-muted">
                            <i class="fa fa-eye"></i> {$item.views}
                            <i class="fa fa-heart ml-2"></i> {$item.likes}
                        </small>
                        <a href="{:url('article/detail', ['id' => $item.id])}" class="btn btn-sm btn-primary">阅读更多</a>
                    </div>
                </div>
            </div>
        </div>
        {/foreach}
    </div>

    <div class="row">
        <div class="col-12">
            {$list}
        </div>
    </div>
</div>